<template>
  <div>
    <div v-if="flag">
      <Form ref="formInline" :model="formInline" inline>
        <FormItem prop="cid">
          <Input type="text" v-model="formInline.cid" placeholder="客户ID">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="name">
          <Input type="text" v-model="formInline.name" placeholder="客户姓名">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')"
            >搜索</Button
          >
          <Button type="primary" style="margin-left: 8px" @click="flag = false"
            >添加</Button
          >
          <Button style="margin-left: 8px" @click="handleBack">返回</Button>
        </FormItem>
      </Form>
    </div>
    <div v-else>
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <Row justify="space-between">
          <Col span="8">
            <FormItem label="顾客号" prop="cid">
              <Input
                v-model="formValidate.cid"
                placeholder="自动生成"
                disabled
              ></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="姓名" prop="name">
              <Input v-model="formValidate.name" placeholder="输入姓名"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="手机号" prop="phone">
              <Input v-model="formValidate.phone" placeholder="手机号"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row justify="space-between">
          <Col span="8">
            <FormItem label="性别" prop="sex">
              <RadioGroup v-model="formValidate.sex">
                <Radio label="true">男</Radio>
                <Radio label="false">女</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="地址" prop="address">
              <!-- <Input
            v-model="formValidate.address"
            placeholder="输入详细地址"
          ></Input> -->
              <Cascader
                :data="dataregion"
                v-model="formValidate.address"
                filterable
                placeholder="请选择地址"
                @on-change="ccid"
              ></Cascader>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem>
              <Button
                type="primary"
                @click="handleAdd('formValidate')"
                style="margin-left: 8px"
                >添加</Button
              >
              <Button
                @click="handleReset1('formValidate')"
                style="margin-left: 8px"
                >重置</Button
              >
              <Button @click="flag = true" style="margin-left: 8px"
                >返回</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
      dataregion: [],
      formInline: {
        cid: "",
        name: "",
      },
      formValidate: {
        cid: "",
        name: "",
        phone: "",
        sex: "",
        address: [],
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            type: "array",
            message: "Please select the city",
            trigger: "change",
          },
        ],
        sex: [
          {
            required: true,
            type: "string",
            message: "Please select gender",
            trigger: "change",
          },
        ],

        phone: [
          {
            required: true,
            type: "string",
            message: "Please select the date",
            trigger: "change",
          },
        ],
        cid: [
          {
            required: true,
            type: "string",
            message: "请输入顾客号",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.axios
      .post("/api/create", { ctype: "coid", type: "", city: "" })
      .then((r) => {
        this.formValidate.cid = r.data;
      })
      .catch((e) => {
        this.$Message.error("e" + e);
      });

    this.axios
      .get("/api/region")
      .then((r) => {
        this.dataregion = r.data;
      })
      .catch((E) => {
        this.$Message.error("e" + E);
      });
    // this.axios.post("/api/create").then((r)=>{
    //   this.formValidate.cid=r.data
    // }).catch((e)=>{
    //   this.$Message.error("e"+e)
    // })
  },
  methods: {
    handleSubmit() {
      if (this.formInline.cid || this.formInline.name) {
        // this.$Message.info("查询成功")
        this.$emit("search", this.formInline);
      } else {
        this.$Message.info("至少输入一个查询");
      }
    },
    // handleadd(){
    //     this.$emit("adds")
    // },
    handleBack() {
      this.$emit("back");
    },
    handleAdd(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success("Success!");
          this.$emit("addcu", this.formValidate);
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset1(name) {
      this.$refs[name].resetFields();
    },

    ccid() {
      // var to_create={
      //   ctype:"ccid",
      //   city:value[0].substring(0,2),
      //   type:""
      // }
      // this.axios.post('/api/create',to_create).then((r)=>{
      //   this.formValidate.cid=r.data
      // }).
      // catch((e)=>{
      //   this.$Message.error("e"+e)
      // })
    },
  },
  components: {},
};
</script>
